<template>
	<view class="container">
		<view v-if="user">
			<view v-if="user.icon" class="headPicture"><image :src="`http://localhost:8090${user.icon}`" mode="aspectFit" @click="updateHeadPicture"></image></view>
			<view v-else class="emptyHeadPicture" @click="updateHeadPicture"></view>
			<uni-list>
				<uni-list-item title="修改密码" note=""></uni-list-item>
				<uni-list-item title="电话" note="" :right-text="user.telephone"></uni-list-item>
			</uni-list>
			<button type="default" @click="quitLogin">退出登录</button>
		</view>
		<view v-else>
			<view class="emptyHeadPicture"></view>
			<navigator url="login/login"><button type="default">登录</button></navigator>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: null
		};
	},
	methods: {
		quitLogin() {
			uni.clearStorage();
			this.user = null;
		},
		updateHeadPicture() {
			uni.chooseImage({
				count: 1,
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: 'http://localhost:8090/foodapp/uploadheadicon',
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							id: this.user.id
						},
						success: uploadFileRes => {
							let data = JSON.parse(uploadFileRes.data);
							if (data.success) {
								uni.showToast({
									icon:'none',
									title: '成功'
								});
								this.user.icon = data.headiconpath;
								uni.setStorageSync('user', JSON.stringify(this.user));
							} else {
								uni.showToast({
									icon:'none',
									title: '失败'
								});
							}
						}
					});
				}
			});
		}
	},
	onLoad(e) {
		this.user = uni.getStorageSync('user');
		if (this.user) {
			this.user = JSON.parse(this.user);
		}
	}
};
</script>

<style>
.container {
	padding: 20px;
	font-size: 14px;
	line-height: 24px;
}
image {
	width: 100%;
	height: 100%;
}
.headPicture {
	width: 100rpx;
	height: 100rpx;
}
.emptyHeadPicture {
	width: 100rpx;
	height: 100rpx;
	background-color: #f9ecd7;
	border-radius: 50%;
}
</style>